<template>
  <div class="modal" v-show="modalTag">
    <div class="shadow"></div>
    <div class="content">
      <span class="close" @click="modalTag=false">关闭</span>
      <table class="table table-order table-order-hover">
        <thead>
          <tr>
            <th>序号</th>
            <th>商品标题</th>
            <th>订单状态</th>
            <th>付款金额</th>
            <th>返佣</th>
            <th>是否结清</th>
            <th>淘宝订单编号</th>
            <th>付款时间</th>
            <th>定金</th>
            <th>付款预估收入</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in memberList" :key="index">
            <td style="width:60px">
              <div class="ct" style="width:50px">{{index+1}}</div>
            </td>
            <td>
              <div class="ct">{{item.title}}</div>
            </td>
            <td>
              <div class="ct">{{item.status}}</div>
            </td>
            <td>
              <div class="ct">{{item.pay}}</div>
            </td>
            <td>
              <div class="ct">{{item.fanyong}}</div>
            </td>
            <td>
              <div class="ct">{{item.is_jiesuan}}</div>
            </td>
            <td>
              <div class="ct">{{item.no}}</div>
            </td>
            <td>
              <div class="ct">{{item.fukuan_time}}</div>
            </td>
            <td>
              <div class="ct">{{item.dingjing}}</div>
            </td>
            <td>
              <div class="ct">{{item.yg_souru}}</div>
            </td>
          </tr>
        </tbody>
      </table>
      <!-- <table class="table table-order table-order-hover">
        <thead>
          <tr>
            <th>序号</th>
            <th>银行</th>
            <th style="width:120px;">商品id</th>
            <th>店名</th>
            <th>兑换积分</th>
            <th>兑换现金</th>
            <th>原价</th>
            <th>门店限制</th>
            <th>开始时间</th>
            <th>结束时间</th>
            <th>纯积分</th>
            <th>限购</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in orderList" :key="index">
            <td style="width:60px">
              <div class="ct" style="width:50px">{{index+1}}</div>
            </td>
            <td>
              <div class="ct">{{item.bank}}</div>
            </td>
            <td>
              <div class="ct">{{item.id}}</div>
            </td>
            <td>
              <div class="ct">{{item.shop}}</div>
            </td>
            <td>
              <div class="ct">{{item.points}}</div>
            </td>
            <td>
              <div class="ct">{{item.exchangeCash}}</div>
            </td>
            <td>
              <div class="ct">{{item.price}}</div>
            </td>
            <td>
              <div class="ct">{{item.placeLimit}}</div>
            </td>
            <td>
              <div class="ct">{{item.startTime}}</div>
            </td>
            <td>
              <div class="ct">{{item.endTime}}</div>
            </td>
            <td>
              <div class="ct">{{item.pointsOnly}}</div>
            </td>
            <td>
              <div class="ct">{{item.qtLimit}}</div>
            </td>
          </tr>
        </tbody>
      </table> -->
      <div class="flex">
        <p>----个 人 信 息----</p>
        <p>用户信息:{{name}}</p>
        <!-- <p>总付款金额:{{countPay()}}元</p> -->
        <p>总提现红包:{{count('已结算')}}元</p>
        <p>可提现红包:{{count('已收货')}}元</p>
        <p>未收货红包:{{count('已付款')}}元</p>
        <!-- <p>利润：{{countLIRun()}}</p> -->
        <p v-show="false">发送：【提现】，可以自动提现返还红包</p>
      </div> 
    </div>                
  </div>
</template>

<script>
export default {
  data () {
    return {
      fkList: [],
      txList: [],
      memberInfo: {}
    }
  },
  props: ['memberList', 'modalTag', 'name'],
  // props: {
  //   // title: {type: String, default: ''},
  //   memberList: {type: Array},
  //   modalTag:{type: Boolean, default: true}
  // },
  mounted() {
    // this.count()
  },
  methods: {
    /**
     * 付款金额
     */
    countPay () {
      let pay = 0
      this.memberList.forEach((e, j) => {
        if (e.pay) {
          pay += parseFloat(e.pay)
        }
      })
      return pay.toFixed(2)
    },
    /**
     * 利润
     */
    countLIRun () {
      let lirun = 0
      this.memberList.forEach((e, j) => {
        if (e.ygShouRu) {
          lirun += parseFloat(e.ygShouRu - e.fanyong)
        }
      })
      return lirun.toFixed(2)
    },
    count (val) {
      let list = this.filterStatus(val)
      let fanyong = 0
      if (list.length > 0) {
        list.forEach((e, j) => {
          if (e.fanyong) {
            fanyong += parseFloat(e.fanyong)
          }
        })
      }
      return fanyong.toFixed(2)
    },
    filterStatus (val) {
      let list = this.memberList.filter(v => {
        return v.status === val
      })
      return list
    },
    _handleOk () {
      this.$emit('onOk', '')
    }
  }
}
</script>
<style scoped lang="less">
.table{
  border: 1px solid #b6ead6;
}
.modal{
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 3;
  .shadow{
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .8);
    z-index: 4;
  }
  .content{    
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-450px, -350px);
    width: 900px;
    height: 700px;
    padding: 30px 10px 10px 10px;
    background: rgba(255, 255, 255, 1);
    border-radius: 15px;
    border: 1px solid #e9e9e9;
    font-size: 16px;
    overflow-y: auto;
    z-index: 5;
    .close{
      position: absolute;
      top: 0;
      right: 10px;
      font-size: 18px;
      cursor: pointer;
    }
  }
}
</style>
